<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body>
	<div id="app">
		<main class="pab150" >
			<section class="order picBg">
				<div class="container">
					<div class="pad30 whiteBg radius20 mbt30">
						<div class="item">
							<h4 class="type">{{ticket.gym.name}}</h4>
							<div class="time" id="today"></div>
							<div>
								{{ticket.name}}
							</div>
						</div>
						<div class="item clearfix">
							<div class="name">购票人：</div>
							<input type="text" class="formInput" id="name" readonly v-model="loginUser.realname"/>
						</div>
						<div class="item clearfix">
							<div class="name">手机号：</div>
							<input type="text" class="formInput" id="mobile" readonly v-model="loginUser.phonenum"/>
						</div>
						<div class="item clearfix">
							<div class="item clearfix">
								<div class="name">选择日期</div>
<!--								<input type="text" class="formInput" id="dateSelect" @change="findTicketNum()"/>-->
								<select class="formInput" id="TicketSchedule" v-model="TicketNumId" @change="findTicketNum()" >
									<option value="doNot" selected="selected">选择时间</option>
									<option v-for="TicketSchedule in TicketSchedules"  :value="TicketSchedule.id" >{{TicketSchedule.date}}</option>
								</select>
							</div>
							<div>
								<div class="name">日期票余数</div>
								<input readonly placeholder="已售罄" v-show="TicketNum===0">
								<input readonly :value="TicketNum" v-show="TicketNum!==0"/>张
							</div>
						</div>
					</div>
					<div class="pad30 whiteBg radius20 mbt30">
						<label class="item clearfix">
							<div class="name">数量</div>
							<select class="formInput" id="num" v-model="orders01.num" @change="priceChange()">
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
							</select>
						</label>
						<div class="item clearfix">
							<div class="name color999">原价</div>
							<div class="price">{{ticket.price}}</div>
						</div>
					</div>
					<div class="name color999">优惠券</div>

					<select class="formInput" id="Coupon" v-model="orders01.orders.couponid" @change="priceChange()">
						<option value="doNotUseCoupon">不使用优惠券</option>
						<option v-for="(coupon,i) in userAndCoupons.coupons"  :value="userAndCoupons.ucIds[i]" >{{coupon.name}}   剩余{{userAndCoupons.lastDays[i]}}天可用</option>
					</select>

					<div class="pad30 whiteBg radius20 mbt30">
						<h3 class="commonTitle"><i class="icon"></i>注意事项</h3>
						<div class="text">
							{{ticket.gym.note}}
						</div>
					</div>
				</div>
			</section>			
		</main>
		<footer class="footer footer2 clearfix" >
			<div class="container clearfix">
				<div class="price">总价:<b>{{price}}</b></div>
				<div class="payBtn" id="payBtn" @click="buy()">立即支付</div>
			</div>			
		</footer>
	</div>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/Mdate.js"></script>
		<script type="text/javascript" src="../js/iScroll.js"></script>
		<script type="text/javascript" src="../js/main.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/getParameter.js"></script>
		<script>
			let tid=getParameter("tid");
			let app=new Vue({
				el:"#app",
				data:{
				orders01:{
					orders:{
						bookerid:"",
						booktime:"",
						introduce:"",
						ticketid:"",
						couponid:"doNotUseCoupon",
						price:"",
					},
					num:1,
				},
					loginUser:{
						birthday:"",
						email:"",
						id:"",
						identitynum:"",
						password:"",
						phonenum:"",
						realname:"",
						sex:"",
						src:"",
						status:"",
						username:"",
						coupon:{
							id:"",
						},
					},
					ticket:{
						gym:{
							id:"",
							name:"",
							introduce:"",
							itemdesc:"",
							note:"",
						},
						id:"",
						tickettype:"",
						price:"",
						effectivetime:"",
						targetid:"",
						name:"",
						src:"",
					},
					CouponNum:"1",
					userAndCoupons:{},
					price:"",
					TicketSchedules:{},
					TicketNum:"",
					TicketNumId:"doNot",
				},
				methods:{
					checkLogin(){
						// let _this=this;
						// axios.get("/user/findLogin").then(function (response){
						// 		_this.loginUser=response.data;
						// })
						axios.get("/user/findLogin/"+tid).then(function (res) {
							app.userAndCoupons = res.data;
							console.log(res.data)
							app.TicketSchedules=res.data.ticketSchedules;
							app.loginUser = res.data.loginUser
						})
					},
					findTicket(){
						let _this=this;
						axios.get("/ticket/findOne",{params:{tid:tid}}).then(function (response){
							_this.ticket=response.data;
							_this.orders01.orders.bookerid=_this.loginUser.id;
							_this.orders01.orders.introduce=_this.ticket.gym.introduce;
							// _this.orders01.orders.couponid=_this.loginUser.coupon.id;
							_this.orders01.orders.ticketid=_this.ticket.id;
							_this.price=_this.ticket.price;
						})
					},
					buy(){
						let _this=this;
						_this.orders01.orders.objid = app.ticket.id
						_this.orders01.orders.bookerid=_this.loginUser.id;
						_this.orders01.orders.price=_this.price;
						if(_this.TicketNumId==="doNot")
						{layer.msg("请选择时间，否则无法下单")}
						else
						{
						if(_this.TicketNum===0) {
							layer.msg("已售罄，请选择其他日期")
						}else {
						axios.post("/ticket/buy",_this.orders01).then(function (response){
							if(response.data==="succeed"){
								axios.get("/ticket/deleteNum",{params: {id:_this.TicketNumId,num:_this.orders01.num}}).then(function (response){
									location.href="/userclient/index.html";
								})
							}else {
								console.log(response.data)
								layer.msg(response.data);
							}
						})
						}}
					},
					priceChange(){
					    let _this=this;
						if (this.userAndCoupons==="") _this.price=0;
						let ucouponid=this.orders01.orders.couponid
						_this.price = this.userAndCoupons.ticket.price*this.orders01.num
						for (let i = 0; i < this.userAndCoupons.ucIds.length; i++) {
							let ucid = this.userAndCoupons.ucIds[i];
							if (ucid===ucouponid){
								let coupon = this.userAndCoupons.coupons[i]
								if (coupon.type===0) {
									axios.get("/order/price",{params:{price:_this.price,number:coupon.number}}).then(function (response){
										_this.price = response.data;
									})
								}
								else if (coupon.type===1) _this.price = _this.price - coupon.number;
							}
						}
						if (_this.price<0) _this.price = 0;
					},
					findTicketNum(){
						for(let i=0;i<this.userAndCoupons.tsIds.length;i++){
							let tsId=this.userAndCoupons.tsIds[i];
							if(app.TicketNumId===tsId){
								let ticket=this.userAndCoupons.ticketSchedules[i];
								app.TicketNum=ticket.lastnum;
								app.orders01.orders.booktime=ticket.date;
							}
						}
					}
				},
				created(){
					this.checkLogin();
					this.findTicket();
				},
			})
		</script>
	</body>

</html>